import React, { useRef, useState } from 'react';
import { ActionType, ProColumns, ProFormInstance, ProTable } from '@ant-design/pro-components';
import { Button, Tag } from 'antd';
import ModalDialog from '@/pages/ChecknHistory/components/ModalDialog';
import { getLogSetupCardList } from './request';
import { useIntl } from '@umijs/max';
export const waitTimePromise = async (time: number = 100) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(true);
    }, time);
  });
};

export const waitTime = async (time: number = 100) => {
  await waitTimePromise(time);
};

// 定义表格数据源类型
export type GithubIssueItem = {
  id: number;
  hid: number;
  cardHolder: string;
  cardType: number;
  cardNum: string;
  expirationDate: string;
  issuingTime: string;
  exitTime: string;
  isOpenLocked: number;
  isMute: number;
  status: number;
  buildingName: string;
  floor: string;
  createBy: string;
  createAt: number;
};

const Report: React.FC = () => {

  const intl = useIntl()

  const actionRef = useRef<ActionType>();

  // 控制对话框显示隐藏
  const [visible, setVisible] = useState(false);

  // 对话框展示的那一行数据信息
  const [form] = useState<GithubIssueItem | null>(null);



  const ref = useRef<ProFormInstance>();

  // 表格数据--列展示信息
  const columns: ProColumns<GithubIssueItem>[] = [
    {
      title: intl.formatMessage({ id: "Administer.serial" }),
      dataIndex: 'inedx',
      valueType: 'index',
      width: 60,
    },
    {
      title: intl.formatMessage({ id: "Administer.number" }),
      dataIndex: 'cardNum',

    },

    {
      title: intl.formatMessage({ id: "Administer.Card issuance time" }),
      dataIndex: 'issuingTime',
      search: false,
    },
    {
      title: intl.formatMessage({ id: "Administer.Card issuance time" }),
      dataIndex: 'issuingTime',
      valueType: 'dateRange',
      hideInTable: true,
      search: {
        transform: (value) => {
          return {
            issuing_start_time: value[0],
            issuing_end_time: value[1],
          };
        },
      },
    },
    {
      title: intl.formatMessage({ id: "Administer.Return time" }),
      dataIndex: 'exitTime',
      search: false,
    },

    {
      title: intl.formatMessage({ id: "Administer.Card status" }),
      dataIndex: 'status',
      valueType: 'select',
      search: false,
      valueEnum: {
        1: {
          text: (
            <Tag color="#308430" style={{ width: '70px', textAlign: 'center' }}>
              {intl.formatMessage({ id: "Administer.In use" })}
            </Tag>
          ),
        },
        2: {
          text: (
            <Tag color="#fb3838" style={{ width: '70px', textAlign: 'center' }}>
              {intl.formatMessage({ id: "Administer.Return card" })}
            </Tag>
          ),
        },
        3: {
          text: (
            <Tag color="#777777" style={{ width: '70px', textAlign: 'center' }}>
            {intl.formatMessage({ id: "Administer.Cancellation" })}
            </Tag>
          ),
        },
        4: {
          text: (
            <Tag color="#99cc00" style={{ width: '70px', textAlign: 'center' }}>
               {intl.formatMessage({ id: "Administer.Loss" })}
            </Tag>
          ),
        },
      },
    },
    {
      title: intl.formatMessage({ id: "Administer.Card issuer" }),
      dataIndex: 'createdBy',
      search: false,
    },

  ];

  return (
    <>
      <ProTable<GithubIssueItem>
        defaultSize={'large'}
        columns={columns}
        actionRef={actionRef}
        formRef={ref}
        cardBordered={false}
        pagination={{
          defaultPageSize: 10,
          showSizeChanger: true,
        }}
        request={async (params) => {
          await waitTime(500);
          const res: any = await getLogSetupCardList({
            ...params,
            page: params.current,
          });
          return {
            data: res.data.list || [],
            success: res.code === 0 ? true : false,
            total: res.data.totalCount,
          };
        }}
        rowKey="id"
        search={{ labelWidth: 'auto' }}
        options={{
          setting: {
            listsHeight: 400,
          },
        }}
        dateFormatter="string"
      />
      {visible && (
        <ModalDialog
          visible={visible}
          close={() => {
            setVisible(false);
          }}
          form={form}
        />
      )}
    </>
  );
};

export default Report;
